<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>尺寸问题</title>
           <style>
			   /* 1+100 取值：选择器被选中几率增加 */
			   di v#d1{
				   width: 50%;
				   height: 500px;
				   /* 颜色色值：透明度：遮罩层、左栏 */
				   background: rgba(243, 35, 134, .1);
			   }
			   /* 最大宽度与最小宽度 */
			   div#container{
				   background: #f0f0f0;
			   }
			   div.box{
				   background:#eedce3 ;
				   color: #fff;
				   width: 80%;
				   /* 最小宽度：设定，不能改变，移动端 */
				   min-width:500px ;
				   /* 最大宽度，设定 ,宽度最大上限600px，移动端*/
				   max-width: 650px;
				   /* 页面设定对大于最小宽高,约定,移动端宽高比.页面错乱*/
			   }
		   </style>	
	</head>
	<body>
		<div id="d1"></div>
		<!-- 最大宽度与最小宽度： 
		自适应 ：编写页面在任何浏览器下显示正常-->
		<div id="container">
			<div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium aspernatur nihil quas ad ipsum ut sunt. Sequi repudiandae fugit laudantium esse. Error sequi ratione ab consectetur exercitationem impedit ipsam omnis.</div>
		</div>
	</body>
</html>